<template>
  <div class="h-full w-full relative">

    <!-- svg container -->
    <SvgContainer>
      <template #default="{width,height}">
        <svg :width="width" :height="height">
          <!-- border-left -->
          <g stroke="rgba(94,184,206,1)" fill="rgba(94,184,206,1)">
            <path :d="`M100,0 H70 L65,8 H95 Z`" />

            <path :d="`M55,0 H35 L17,17 H10 V20 H20 L35,5 H50 Z`"/>

            <path :d="`M20,0 L10,8 V12 H11 V8 L20,1`"/>

            <path :d="`M20,30 H5 L0,35 V${height*0.8} L10,${height*0.78} V${height*0.72} H4 V40 Z`" />

            <path :d="`M0,${height*0.84} V${height*0.91} L10,${height*0.93}  V${height*0.86}`" />

            <path :d="`M20,${height-20} L40,${height} H60 L60,${height-5} H40 L25,${height-20}`" />

            <template v-for="n in 10" :key="n">
              <polygon :points="`${60+n*3+n*8},${height-10} ${60+n*3+n*8+5},${height} ${60+n*3+n*8+5+2},${height} ${60+n*3+n*8+2},${height-10}`" />
            </template>

          </g>

          <!-- border-right -->
          <g stroke="rgba(94,184,206,1)" fill="rgba(94,184,206,1)">
            <path :d="`M${width-100},0 H${width-70} L${width-65},8 H${width-95} Z`" />

            <path :d="`M${width-55},0 H${width-35} L${width-17},17 H${width-10} V20 H${width-20} L${width-35},5 H${width-50} Z`"/>

            <path :d="`M${width-20},0 L${width-10},8 V12 H${width-11} V8 L${width-20},1`"/>

            <path :d="`M${width-20},30 H${width-5} L${width},35 V${height*0.8} L${width-10},${height*0.78} V${height*0.72} H${width-4} V40 Z`" />

            <path :d="`M${width},${height*0.84} V${height*0.91} L${width-10},${height*0.93} V${height*0.86}`" />

            <path :d="`M${width-20},${height-20} L${width-40},${height} H${width-60} L${width-60},${height-5} H${width-40} L${width-25},${height-20}`" />

            <template v-for="n in 10" :key="n">
              <polygon :points="`${width-(60+n*3+n*8)},${height-10} ${width-(60+n*3+n*8+5)},${height} ${width-(60+n*3+n*8+5+2)},${height} ${width-(60+n*3+n*8+2)},${height-10}`" />
            </template>

          </g>

          <!-- content -->
          <g stroke-width="2">
            <!-- content-border -->
            <path :d="`M20,40 V${height-40} L40,${height-20} H${width-40} L${width-20},${height-40} V40 L${width-40},20 L40,20 Z`" fill="none" stroke="rgba(62,124,166,0.5)" />
          </g>
        </svg>
      </template>
    </SvgContainer>

    <!-- content container -->
    <div class="h-full w-full relative">
      <slot></slot>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import SvgContainer from '@/components/Common/SvgContainer/index.vue'
</script>
